option:selected"));})$("#btn2").click" />

jQuery 部分方法释意与使用

您所在的位置:网站首页 jquery 基本选择器 jQuery 部分方法释意与使用

jQuery 部分方法释意与使用

2023-06-12 13:54| 来源: 网络整理| 查看: 265

append和appendTo

$(function(){ $("#btn1").click(function(){ $("#sel2").append($("#sel1>option:selected")); }) $("#btn2").click(function(){ $("#sel2>option:selected").appendTo($("#sel1")); }) })

在这里插入图片描述

after(),clone()

after() 定义和用法 after() 方法在被选元素后插入指定的内容。 语法 $(selector).after(content) clone() 定义和用法 clone() 方法生成被选元素的副本,包含子节点、文本和属性。 语法 $(selector).clone(includeEvents) 参数 描述 includeEvents 可选。布尔值。规定是否复制元素的所有事件处理。 默认地,副本中不包含事件处理器。

在这里插入图片描述

$(function(){ var $li=$("哈密瓜"); $("li:eq(2)").after($li); $("li:lt(2)").clone().appendTo("ul"); });

在这里插入图片描述

prepend(),prependTo()

定义和用法 prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。 提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。 语法 $(selector).prepend(content)

$(function(){ $("#btn").click(function(){ var tt = $("#txt").val(); $("#txt").val(""); var $li = $(""+tt+""); $("#ul").prepend($li); }) })

在这里插入图片描述

prop(),

定义和用法 prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时,则返回第一个匹配元素的值。 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。 提示:如需检索 HTML 属性,请使用 attr() 方法代替。 提示:如需移除属性,请使用 removeProp() 方法。 语法 返回属性的值: $(selector).prop(property) 设置属性和值: $(selector).prop(property,value) 使用函数设置属性和值: $(selector).prop(property,function(index,currentvalue)) 设置多个属性和值: $(selector).prop({property:value, property:value,…}) 参数 描述 property 规定属性的名称。 value 规定属性的值。 function(index,currentvalue) 规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 currentvalue - 检索被选元素的当前属性值。

jquery中attr ()和prop ()的区别是:attr函数操作的是文档节点的属性,设置的属性值只能是字符串类型;prop函数操作的是js对象的属性,设置的属性值可以是包括数组和对象在内的任意类型。

$(function(){ $("#CheckedAll").click(function(){ // $(":checkbox").attr("checked",true); $(":checkbox").prop("checked",true); }) $("#CheckedNo").click(function(){ // $(":checkbox").attr("checked",false); $(":checkbox").prop("checked",false); }) $("#CheckedRev").click(function(){ //each()方法是实现对jQuery对象中封装的原生对象的遍历 $(":checkbox").each(function(){ //this就代表当前遍历到的那个原生对象 this.checked=!this.checked; //$(this).prop("checked",!$(this).prop("checked")) }) }) $("#send").click(function(){ var str="你选中的是:\n"; $(":checkbox:checked").each(function(){ str=str+$(this).val()+"\n"; }) alert(str); }) })

在这里插入图片描述

eq()

定义和用法 方法将匹配元素集缩减值指定 index 上的一个。 语法       .eq(index) 参数       index 描述       整数,指示元素的位置(最小为 0)。       如果是负数,则从集合中的最后一个元素往回计数。

$(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前元素高亮 .siblings().removeClass("selected"); //去掉其它同辈元素的高亮 var index = $(this).index(); // 获取当前点击的元素 在其兄弟元素中的索引。 $("div.tab_box>div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div .eq(index).show() //显示 元素对应的元素 .siblings().hide(); //隐藏其它几个同辈的元素 }) })

在这里插入图片描述

定义和用法 :contains 选择器选取包含指定字符串的元素。 该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。 经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素(如上面的例子)。 语法       $(“:contains(text)”) 参数       text 描述       必需。规定要查找的文本。

定义和用法 find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。 语法 .find(selector) 参数 描述 selector 字符串值,包含供匹配当前元素集合的选择器表达式。 详细说明 如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。 .find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

$(function(){ // 奇数行添加“.odd”样式 $("tbody>tr:even").addClass("odd"); // 偶数行添加“.even”样式 $("tbody>tr:odd").addClass("even"); //复选框选中的行添加“.selected”样式。 $("tr:contains('王五')").addClass("selected"); // $(':checkBox:checked').parent().parent().addClass('selected'); $('tbody>tr').click(function() { if ($(this).hasClass('selected')) { $(this).removeClass('selected').find(':checkbox').prop('checked',false); }else{ $(this).addClass('selected').find(':checkbox').prop('checked',true); } }); })

在这里插入图片描述

closest(),change()

在这里插入图片描述 在这里插入图片描述

$(function(){ //删除购物车中的某一行信息 $(".del").click(function(){ $(this).parents("tr").remove(); }) //全选/全不选复选框的功能 $("#selectAll").click(function(){ $("[name=cc]:checkbox").prop("checked",this.checked); }) //下面的复选框与上面全选/全不选复选框的联动 $("[name=cc]:checkbox").click(function(){ var $selA=$("[name=cc]:checked"); var $Ch=$("[name=cc]"); if($selA.length==$Ch.length) $("#selectAll").prop("checked",true); else $("#selectAll").prop("checked",false); }) //添加按钮的功能 $("#addSelect").click(function(){ var $ss=$("[name=cc]:checked"); if($ss.length){ $ss.closest("tr").clone(true).appendTo("table"); //closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上 $("[name=cc]:checkbox").prop("checked",false); } else{ $("table tr:last").clone(true).appendTo("table"); } }) //删除按钮功能 $("#delSelect").click(function(){ var $sel=$("[name=cc]:checked"); if($sel.length){ if(confirm("你确定要删除选定的商品吗?")) $sel.parents("tr").remove(); } else{ alert("你没有选定要删除的商品!"); } }) //修改数量 $("td>input.quantity").change(function(){ var value=$(this).val(); if((value == "")||!(/^[1-9][0-9]*$/.test(value))) { alert("数量不能为空,且只能为正整数"); this.value=this.defaultValue; } else alert("修改成功!"); }); })


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3